<!-- 登录的黑名单提示 -->
<template>
  <div>
    <a-modal 
      v-model="visible" 
      @ok='handleCancel'
      @cancel="handleCancel"
      :dialog-style="{ top: '40vh' }"
      :maskClosable="false"
      :width="448"
      v-dragModal
    >
    <!-- centered -->
      <template slot="title">
        <!-- <i class="icon icon-exclaim64f tip-icon"></i> -->
        <Iconfont class="icon tip-icon" type="icon-exclaim64f"></Iconfont>
        <!-- 客户端IP已进入黑名单 -->
        <span v-if="type == 'black'">{{$t('Client-black')}}</span>
        <!-- 账号已被冻结 -->
        <span v-else>{{$t('Account-frozen')}}</span>
      </template>
      <!-- 黑名单提示 -->
      <div v-if="type == 'black'">
        <span v-if="$store.state.language=='zh'">
          由于您连续5次输入错误的账号，您的客户端IP已进入<span class="special-text">黑名单</span>，请联系超级管理员进行解锁。
        </span>
        <span v-else>
          Since you have entered the wrong account for 5 consecutive times, your client IP has been <span class="special-text">blacklisted</span>.Please contact the super administrator to unlock
        </span>
      </div>
      <!-- 账号冻结提示 -->
      <div v-else-if="type == 'frozen'">
        <span v-if="$store.state.language=='zh'">
          由于您连续5次输入错误的密码，您的账号<span class="special-text">已被冻结</span>。
          <div>剩余冻结时间：<span class="special-text">{{frozenTime}}</span></div>
        </span>
        <span v-else>
          Your account has been <span class="special-text">frozen</span> because you have entered the wrong password for 5 consecutive times.
          <div>Remaining freezing time:<span class="special-text">{{frozenTime}}</span></div>
        </span>
      </div>
      <!-- 永久冻结 -->
      <div v-else-if="type == 'lock'">
        <span v-if="$store.state.language=='zh'">
          您的账号<span class="special-text">已被冻结</span>，请联系超级管理员进行解锁。
        </span>
        <span v-else>
          Your account<span class="special-text"> has been frozen </span>, please contact the super administrator to unfreeze it.
        </span>
      </div>
      <template slot="footer">
        <a-button class="warn-btn" @click="handleCancel">
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "BlackListTip",
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    type: {
      type: String,
    },
    frozenTime: {}
  },
  data() {
    return {
      
    }
  },
  methods: {
    //关闭弹窗
    handleCancel() {
      this.$emit('closeBlackTip');
    },
  },
}
</script>
<style scoped>
  .special-text {
    font-weight: 700;
    color: var(--mainOrangeColor);
  }
  .warn-btn {
    background-color: var(--mainOrangeColor);
    border-color: var(--mainOrangeColor);
    color: #fff;
  }
  .tip-icon {
    color: var(--mainOrangeColor);
    margin-right: 8px;
  }
  ::v-deep.ant-modal-header {
    border-bottom: none;
  }
  ::v-deep.ant-modal-footer {
    border-top: none;
  }
  ::v-deep.ant-modal-body {
    padding: 12px 24px;
  }
</style>